import * as React from 'react';
import { connect } from 'react-redux';
import * as moment from 'moment';
import { IStoreState, IAction } from '@/types';
import style from './EventBasicInfo.less';

import StackList from './StackList';
import { Dispatch, bindActionCreators } from 'redux';
import { doParseSourcemapRequest } from '@/store/actions';
import { IStack } from '@/api';


// interface Props {
//     data: IError,
//     clientInfo: IClientInfo,
//     location: ILocation,
//     libInfo: ILibInfo,
//     parseSourcemap:(param:IStack)=>IAction
// }


function EventInfo(props: any) {

    return (
        <div className={style.wrapper}>
            <div className={style.info}>
                <div className={style.part}>
                    <div className={style.title}>概要信息</div>
                    <ul>
                        <li className={style.item}>
                            <span className={style.name}>时间</span>
                            <span>{props.time && moment(props.time).format('YYYY-MM-DD HH:mm:ss')}</span>
                        </li>
                        <li className={style.item}>
                            <span className={style.name}>类型</span>
                            <span>{props.type}</span>
                        </li>
                        <li className={style.item}>
                            <span className={style.name}>URL</span>
                            <span>{props.url}</span>
                        </li>
                        {
                            (props.type === 'LOG_ERROR' || props.type === 'PROMISE_ERROR') && (
                                <li className={style.item}>
                                    <span className={style.name}>信息</span>
                                    <span>{props.message}</span>
                                </li>
                            )
                        }
                    </ul>
                </div>
                {
                    props.type === 'HTTP_ERROR' && (
                        <div className={style.part}>
                            <div className={style.title}>请求信息</div>
                            <div>
                                <div className={style.request}>Request</div>
                                <ul>
                                    <li className={style.item}>
                                        <span className={style.name}>method</span>
                                        <span>{props.method}</span>
                                    </li>
                                    <li className={style.item}>
                                        <span className={style.name}>url</span>
                                        <span>{props.request && props.request.requestUrl}</span>
                                    </li>
                                    {
                                        props.data && (
                                            <li className={style.item}>
                                                <span className={style.name}>body</span>
                                                <span>{props.data}</span>
                                            </li>
                                        )
                                    }
                                    {
                                        props.params && (
                                            <li className={style.item}>
                                                <span className={style.name}>params</span>
                                                <span>{props.params}</span>
                                            </li>
                                        )
                                    }
                                </ul>
                            </div>
                            <div>
                                <div className={style.response}>Response</div>
                                <ul>
                                    <li className={style.item}>
                                        <span className={style.name}>status</span>
                                        <span>{props.status}</span>
                                    </li>
                                    <li className={style.item}>
                                        <span className={style.name}>response</span>
                                        <span>{props.statusText}</span>
                                    </li>
                                    <li className={style.item}>
                                        <span className={style.name}>description</span>
                                        <span>{props.description}</span>
                                    </li>
                                </ul>
                            </div>

                        </div>
                    )
                }
                {
                    props.type === 'JAVASCRIPT_ERROR' && (
                        <div className={style.part}>
                            <div className={style.title}>错误信息</div>
                            <ul>
                                <li className={style.item}>
                                    <span className={style.name}>名称</span>
                                    <span>{props.name}</span>
                                </li>
                                <li className={style.item}>
                                    <span className={style.name}>信息</span>
                                    <span>{props.message}</span>
                                </li>
                                <li className={style.item}>
                                    <span className={style.name}>行号</span>
                                    <span>{props.line}</span>
                                </li>
                                <li className={style.item}>
                                    <span className={style.name}>列号</span>
                                    <span>{props.column}</span>
                                </li>
                            </ul>
                        </div>
                    )
                }
                {
                    props.type === 'RESOURCE_ERROR' && (
                        <div className={style.part}>
                            <div className={style.title}>资源信息</div>
                            <ul>
                                <li className={style.item}>
                                    <span className={style.name}>name</span>
                                    <span>{props.name}</span>
                                </li>
                                <li className={style.item}>
                                    <span className={style.name}>src</span>
                                    <span>{props.message}</span>
                                </li>
                                <li className={style.item}>
                                    <span className={style.name}>time</span>
                                    <span>{props.time}</span>
                                </li>
                            </ul>
                        </div>
                    )
                }

                {/* {
                    source && (
                        <div className={style.part}>
                            <div className={style.title}>SourceMap信息</div>
                            <ul>
                                <li className={style.item}>
                                    <span className={style.name}>行号</span>
                                    <span>{source.line}</span>
                                </li>
                                <li className={style.item}>
                                    <span className={style.name}>列号</span>
                                    <span>{source.column}</span>
                                </li>
                                <li className={style.item}>
                                    <span className={style.name}>文件</span>
                                    <span>{source.sourceUrl}</span>
                                </li>
                                <li className={style.item}>
                                    <span className={style.name}>源码</span>
                                    <span>
                                        <pre className='hljs'>
                                            <code className='code'>{source.code}</code>
                                        </pre>
                                    </span>
                                </li>
                            </ul>
                        </div>
                    )
                } */}
                <StackList onParseSourcemap={stack => props.parseSourcemap(stack)} stacks={props.stack}></StackList>

            </div>

            <div className={style.common}>
                <div className={style.part}>
                    <div className={style.title}>设备信息</div>
                    <ul>
                        <li className={style.item}>
                            <span className={style.name}>浏览器</span>
                            <span>{props.browser} {props.browserversion}</span>
                        </li>
                        <li className={style.item}>
                            <span className={style.name}>JS引擎</span>
                            <span>{props.engine} {props.engineversion}</span>
                        </li>
                        <li className={style.item}>
                            <span className={style.name}>操作系统</span>
                            <span>{props.os} {props.osversion}</span>
                        </li>
                        <li className={style.item}>
                            <span className={style.name}>设备</span>
                            <span>{props.devicetype}</span>
                        </li>
                    </ul>
                </div>
                <div className={style.part}>
                    <div className={style.title}>位置信息</div>
                    <ul>
                        {/* <li className={style.item}>
                            <span className={style.name}>IP</span>
                            <span>{props.ip}</span>
                        </li> */}
                        <li className={style.item}>
                            <span className={style.name}>地点</span>
                            <span>{props.region}</span>
                        </li>
                        <li className={style.item}>
                            <span className={style.name}>运营商</span>
                            <span>{props.isp}</span>
                        </li>

                    </ul>
                </div>
                <div className={style.part}>
                    <div className={style.title}>其他信息</div>
                    <ul>
                        <li className={style.item}>
                            <span className={style.name}>插件版本</span>
                            <span>{props.libVersion}</span>
                        </li>
                        <li className={style.item}>
                            <span className={style.name}>事件ID</span>
                            <span>{props.eventId}</span>
                        </li>
                        <li className={style.item}>
                            <span className={style.name}>userAgent</span>
                            <span>{props.ua}</span>
                        </li>
                    </ul>
                </div>
            </div>


        </div>
    )
}

const mapStateToProps = (state: IStoreState) => {
    const eventInfo = state.work.eventInfo;
    return {
        ...eventInfo
    }
}


const mapDispatchToProps = (dispatch: Dispatch<IAction>) => ({
    ...bindActionCreators(
        {
            parseSourcemap: (stack: IStack) => {
                return doParseSourcemapRequest(stack)
            }
        },
        dispatch
    )
})

export default connect(mapStateToProps, mapDispatchToProps)(EventInfo);